<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧养老服务平台</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="../css/wt1.css">
</head>

<body>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="nav-container">
        <a href="#" class="logo" @click.prevent="goHome">
          <i class="fas fa-heartbeat logo-icon"></i>
          <div class="logo-text">智慧<span>养老</span>平台</div>
        </a>
        <nav class="nav-links">
          <a href="#" class="nav-link" :class="{'active': currentPage === 'home'}" @click.prevent="goHome">
            <i class="fas fa-home"></i>
            首页概览
          </a>
          <a href="#" class="nav-link" :class="{'active': currentPage === 'health'}" @click.prevent="goHealth">
            <i class="fas fa-user-injured"></i>
            健康数据
          </a>
          <a href="#" class="nav-link" @click.prevent="showLocation">
            <i class="fas fa-map-marker-alt"></i>
            一键定位
          </a>
          <a href="#" class="nav-link" @click.prevent="showService">
            <i class="fas fa-concierge-bell"></i>
            预约服务
          </a>
          <a href="#" class="nav-link" @click.prevent="showEmergency">
            <i class="fas fa-first-aid"></i>
            紧急求助
          </a>
        </nav>
      </div>
    </header>

    <!-- 健康数据页面 -->
    <section class="health-data-page fade-in" v-else>
      <div class="health-container">
        <div class="health-header">
          <h2 class="health-title">老年健康数据监测中心</h2>
          <button class="back-btn" @click="goHome">
            <i class="fas fa-arrow-left"></i>
            返回首页
          </button>
        </div>


        <div class="health-content">
          <div class="personal-info">
            <div class="info-badge">健康状况良好</div>
            <div class="avatar-container">
              <div class="avatar-placeholder">
                <i class="fas fa-user"></i>
              </div>
              <div class="user-name">张建民</div>
              <div class="user-age">68岁 · 北京市朝阳区</div>

              <div class="info-section">
                <div class="section-title">基本信息</div>
                <div class="info-item">
                  <i class="fas fa-signature"></i>
                  <strong>姓名：</strong> 张建民
                </div>
                <div class="info-item">
                  <i class="fas fa-id-card"></i>
                  <strong>年龄：</strong> 68岁
                </div>
                <div class="info-item">
                  <i class="fas fa-map-marker-alt"></i>
                  <strong>居住地址：</strong> 北京市朝阳区呼家楼北街45号
                </div>
                <div class="info-item">
                  <i class="fas fa-phone-alt"></i>
                  <strong>紧急联系人：</strong> 张小民 (13800138000)
                </div>
              </div>

              <div class="info-section">
                <div class="section-title">健康状况</div>
                <div class="info-item">
                  <i class="fas fa-heartbeat"></i>
                  <strong>病史：</strong> 高血压、糖尿病
                </div>
                <div class="info-item">
                  <i class="fas fa-user-md"></i>
                  <strong>签约医生：</strong> 王立华 主任医师
                </div>
                <div class="info-item">
                  <i class="fas fa-file-medical"></i>
                  <strong>当前用药：</strong> 二甲双胍、洛汀新
                </div>
                <div class="info-item">
                  <i class="fas fa-clock"></i>
                  <strong>随访日期：</strong> 每周三 下午14:00-16:00
                </div>
              </div>

              <div class="info-section">
                <div class="section-title">体征指标</div>
                <div class="info-item">
                  <i class="fas fa-heart"></i>
                  <strong>心率：</strong> 78 次/分 (正常)
                </div>
                <div class="info-item">
                  <i class="fas fa-temperature-high"></i>
                  <strong>血压：</strong> 136/82 mmHg (良好)
                </div>
                <div class="info-item">
                  <i class="fas fa-weight"></i>
                  <strong>体重：</strong> 69.3 kg
                </div>
              </div>
            </div>
          </div>



          <div class="charts-container">
            <!-- 月度健康数据趋势图（根据图片精准重建） -->
            <div class="chart trend-chart fade-in" style="animation-delay: 0.1s">
              <div class="chart-title">
                <span>月度健康数据趋势</span>
                <span class="chart-value">综合评分: 84.3</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <!-- 连接所有数据点的折线 -->
                      <path :d="trendPath" class="line-path"></path>

                      <!-- 精确位置的数据点 -->
                      <circle v-for="(point, idx) in trendPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <!-- 网格线 -->
                      <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                      <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                      <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                      <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
                    </svg>

                    <!-- 数据点标签 -->
                    <div v-for="(point, idx) in trendPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }}</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">630</div>
                    <div class="y-label">500</div>
                    <div class="y-label">300</div>
                    <div class="y-label">100</div>
                    <div class="y-label">0</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">1月</div>
                    <div class="x-label">4月</div>
                    <div class="x-label">7月</div>
                    <div class="x-label">10月</div>
                    <div class="x-label">12月</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 血氧饱和度图表（根据图片精准重建） -->
            <div class="chart oxygen-chart fade-in" style="animation-delay: 0.2s">
              <div class="chart-title">
                <span>每日血氧饱和度变化 (24小时)</span>
                <span class="chart-value">当前: 98%</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <path :d="oxygenPath" class="line-path"></path>

                      <circle v-for="(point, idx) in oxygenPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                      <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                      <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                      <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
                    </svg>
                    <div v-for="(point, idx) in oxygenPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }}%</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">100%</div>
                    <div class="y-label">80%</div>
                    <div class="y-label">60%</div>
                    <div class="y-label">40%</div>
                    <div class="y-label">20%</div>
                    <div class="y-label">0%</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">00:00</div>
                    <div class="x-label">06:00</div>
                    <div class="x-label">12:00</div>
                    <div class="x-label">18:00</div>
                    <div class="x-label">24:00</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 血糖图表（根据图片精准重建） -->
            <div class="chart sugar-chart fade-in" style="animation-delay: 0.3s">
              <div class="chart-title">
                <span>老年人一周血糖变化情况</span>
                <span class="chart-value">今日: 6.8 mmol/L</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <path :d="sugarPath" class="line-path"></path>

                      <circle v-for="(point, idx) in sugarPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <line x1="0" y1="100" x2="1000" y2="100" class="grid-line"></line>
                      <line x1="0" y1="200" x2="1000" y2="200" class="grid-line"></line>
                      <line x1="0" y1="300" x2="1000" y2="300" class="grid-line"></line>
                    </svg>
                    <div v-for="(point, idx) in sugarPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }} mmol/L</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">30.0</div>
                    <div class="y-label">20.0</div>
                    <div class="y-label">10.0</div>
                    <div class="y-label">0.0</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">周一</div>
                    <div class="x-label">周二</div>
                    <div class="x-label">周三</div>
                    <div class="x-label">周四</div>
                    <div class="x-label">周五</div>
                    <div class="x-label">周六</div>
                    <div class="x-label">周日</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>


  <script type="module" src="../js/wt1.js"></script>
</body>

</html>